<template>
  <div>
    <div class="py-1 bg-white">
      <div v-for="(item, index) in descList" :key="index">
        <div>
          <custom-details-item :icon="item.icon" :label="item.label" :value="item.value + ''">
            <template #valueSlot>
              <div v-if="item.isFile && item.value!=='' && item.value!=='-' && item.value!=='/'">
                <!--                <template v-if="item.value.length > 0">-->
                <el-link type="primary" @click="openAttachPopUp(item.value)">查看</el-link>
                <!--                </template>-->
                <!--                <span v-else>-->
                <!--                  {{ item.label !== '厂区平面图' ? '暂无数据' : '/' }}-->
                <!--                </span>-->
              </div>
              <div v-else class="d-flex align-items-center">
                {{ item.value === '' ? '/' : item.value }}
                <span v-if="item.label === '员工人数' && item.value!=='' && item.value!=='/'" class="mr-2">人</span>
                <el-link
                  v-if="item.label === '员工人数' && item.value!=='' && item.value!=='/'"
                  type="primary"
                  @click="changeRecordDialog = true"
                >变更历史</el-link>
              </div>
            </template>
          </custom-details-item>
        </div>
      </div>
      <!-- <div slot="detail" class="mt-1 mb-1"><div id="olMap" ref="olMap" class="olMap" /></div> -->
    </div>
    <van-popup
      v-model="changeRecordDialog"
      position="right"
      :style="{ width:'100%',height:'100%' }"
      get-container="body"
    >
      <div class="history-pop-up" style="height: 100%;">
        <div class="mx-1 common-details">
          <customDetailsTopbar title="变更历史" flag @back="changeRecordDialog = false" />
          <div v-if="changeRecordDialog" class="pt-1 pb-1 d-scroll listInner">
            <div v-if="listData && listData.length>0" class="common_list  bg-white">
              <div v-for="(item, index) in listData" :key="index" class="list_item">
                <div class="content_area">
                  <div class="number_order">{{ index + 1 }}</div>
                  <div class="right_content">
                    <div class="content_title" style="max-width: 100%">
                      {{ item.updateTime }}
                    </div>
                    <ul>
                      <li>
                        <i class="iconfont c-text-color1">&#xe790;</i>
                        <div class="label">员工人数：</div>
                        <div class="value">{{ item.thisEmployeesCount || '/' }}</div>
                      </li>
                      <!--                      <li>-->
                      <!--                        <i class="iconfont c-text-color2">&#xe790;</i>-->
                      <!--                        <div class="label">变更时间：</div>-->
                      <!--                        <div class="value">{{ item.updateTime || '/' }}</div>-->
                      <!--                      </li>-->
                      <li>
                        <i class="iconfont c-text-color3">&#xe790;</i>
                        <div class="label">较上一次增加：</div>
                        <div class="value">{{ item.percentage || '/' }}</div>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            <div v-else class="bg-white common_list">
              <el-empty />
            </div>
          </div>
        </div>
      </div>
      <!--      <div class="px-1" style="padding-top: 50px">-->
      <!--        <el-table :data="listData" class="monitorLoading" height="350px">-->
      <!--          <el-table-column align="center" label="员工人数" prop="thisEmployeesCount" width="70" show-overflow-tooltip />-->
      <!--          <el-table-column align="center" label="变更时间" prop="updateTime" show-overflow-tooltip />-->
      <!--          <el-table-column align="center" label="较上一次增加（%）" width="150" prop="percentage" show-overflow-tooltip />-->
      <!--          <el-empty slot="empty" description="暂无数据" />-->
      <!--        </el-table>-->
      <!--      </div>-->
    </van-popup>
    <attachPopUp ref="attachPopUp" file-name-key="fileName" file-url-key="fileUrl" />
  </div>
</template>

<script>
import mapOL from '@/assets/mixin/mapOL'
import {
  aqCompanyInfo,
  getCompanyEmployeesUpdateVOList,
  getNyCompanyEmployeesUpdateVOList,
  getXfCompanyEmployeesUpdateVOList,
  hbCompanyInfo,
  NyCompanyInfo,
  XfCompanyInfo
} from '@/api/enterprise'
import customDetailsItem from '@/components/globals/custom-details-item.vue'
import commonList from '@/assets/mixin/commonList'
import CustomDetailsTopbar from '@/components/globals/custom-details-topbar.vue'

export default {
  name: 'BasicComponent',
  components: { CustomDetailsTopbar, customDetailsItem },
  inject: ['layout'],
  mixins: [mapOL, commonList],
  data() {
    return {
      current: '',
      companyId: '',
      companyName: '',
      descList: [
      ],
      factoryImgList: [],
      listData: [],
      changeRecordDialog: false
    }
  },
  mounted() {
    const { current, companyId } = this.$route.query
    this.companyId = companyId || ''
    this.current = current || ''
    if (this.current === '消防管理') {
      this.descList.push({ label: '消防重点部位数', value: '', fieldName: 'importantAddr', icon: '&#xe634;' })
    }
    if (current === '安全生产') {
      this.descList = [{
        label: '企业名称',
        value: '-',
        fieldName: 'companyName'
      },
      {
        label: '统一社会信用代码',
        value: '-',
        fieldName: 'creditCode'
      },
      {
        label: '行政区划',
        value: '-',
        fieldName: 'districtName'
      },
      {
        label: '企业分类',
        value: '-',
        fieldName: 'categorize'
      },
      {
        label: '行业类别',
        value: '-',
        fieldName: 'industryType'
      },
      {
        label: '成立时间',
        value: '-',
        fieldName: 'foundTime'
      },
      {
        label: '企业规模',
        value: '-',
        fieldName: 'scale'
      },
      {
        label: '员工人数',
        value: '-',
        fieldName: 'employeesCount',
        isSurge: ''
      },
      {
        label: '安全管理人员数量',
        value: '-',
        fieldName: 'securityPersonCount'
      },
      {
        label: '安全生产管理人',
        value: '-',
        fieldName: 'securityHead'
      },
      {
        label: '联系电话',
        value: '-',
        fieldName: 'securityHeadPhone'
      }]
    } else if (current === '环保管理') {
      this.descList = [{
        label: '企业名称',
        value: '-',
        fieldName: 'companyName'
      },
      {
        label: '统一社会信用代码',
        value: '-',
        fieldName: 'creditCode'
      },
      {
        label: '行政区划',
        value: '-',
        fieldName: 'districtName'
      },
      {
        label: '行业类别',
        value: '-',
        fieldName: 'industryType'
      },
      {
        label: '法人代表',
        value: '-',
        fieldName: 'legalPerson'
      },
      {
        label: '企业规模',
        value: '-',
        fieldName: 'scale'
      },
      {
        label: '员工人数',
        value: '-',
        fieldName: 'employeesCount'
      },
      {
        label: '成立时间',
        value: '-',
        fieldName: 'foundTime',
        span: 2
      },
      {
        label: '厂区平面图',
        value: [],
        fieldName: 'factoryAttachList',
        isFile: true,
        span: 2
      }]
      this.getCompanyEmployeesUpdateVOList()
    } else if (current === '能源管理') {
      this.descList = [{
        label: '企业名称',
        value: '-',
        fieldName: 'companyName'
      },
      {
        label: '统一社会信用代码',
        value: '-',
        fieldName: 'creditCode'
      },
      {
        label: '行政区划',
        value: '-',
        fieldName: 'districtName'
      },
      {
        label: '行业类别',
        value: '-',
        fieldName: 'industryType'
      },
      {
        label: '法人代表',
        value: '-',
        fieldName: 'legalPerson'
      },
      {
        label: '企业规模',
        value: '-',
        fieldName: 'scale'
      },
      {
        label: '员工人数',
        value: '-',
        fieldName: 'employeesCount'
      },
      {
        label: '成立时间',
        value: '-',
        span: 2,
        fieldName: 'foundTime'
      },
      {
        label: '厂区平面图',
        value: '-',
        span: 2,
        isFile: true,
        fieldName: 'factoryAttachList'
      }]
      this.getCompanyEmployeesUpdateVOList()
    } else if (current === '消防管理') {
      this.descList = [{
        label: '企业名称',
        value: '-',
        fieldName: 'companyName'
      },
      {
        label: '统一社会信用代码',
        value: '-',
        fieldName: 'creditCode'
      },
      {
        label: '行政区划',
        value: '-',
        fieldName: 'districtName'
      },
      {
        label: '行业类别',
        value: '-',
        fieldName: 'industryType'
      },
      {
        label: '法人代表',
        value: '-',
        fieldName: 'legalPerson'
      },
      {
        label: '企业规模',
        value: '-',
        fieldName: 'scale'
      },
      {
        label: '员工人数',
        value: '-',
        fieldName: 'employeesCount'
      },
      {
        label: '成立时间',
        value: '-',
        fieldName: 'foundTime'
      },
      {
        label: '消防重点部位数',
        value: '-',
        fieldName: 'importantAddr'
      },
      {
        label: '厂区平面图',
        value: '-',
        isFile: true,
        fieldName: 'factoryAttachList'
      }]
      this.getCompanyEmployeesUpdateVOList()
    }
    this.$nextTick(() => {
      this.companyInfoBasic()
    })
  },
  methods: {
    // 获取企业详情数据--基本信息
    async companyInfoBasic() {
      const api = {
        '安全生产': aqCompanyInfo,
        '环保管理': hbCompanyInfo,
        '消防管理': XfCompanyInfo,
        '能源管理': NyCompanyInfo
      }
      this.layout.showAreaLoading(['.py-1'])
      const { status, data } = await api[this.current]({ companyId: this.companyId })
      if (status === 0 && data) {
        this.companyName = data.companyName
        this.descList.forEach((v) => {
          v.value = data[v.fieldName] !== undefined ? data[v.fieldName] : ''
        })
        if (this.current === '安全生产') {
          this.listData = data.employeesUpdateList
        }
      }
      this.layout.hideAreaLoading(['.py-1'])
    },
    // 变更历史列表
    async getCompanyEmployeesUpdateVOList() {
      const api = {
        环保管理: getCompanyEmployeesUpdateVOList,
        消防管理: getXfCompanyEmployeesUpdateVOList,
        能源管理: getNyCompanyEmployeesUpdateVOList
      }
      const { status, data } = await api[this.current]({
        companyId: this.companyId
      })
      if (status === 0 && data) {
        this.listData = data
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.olMap {
  width: 100%;
  height: 350px;
}
.history-pop-up{
  background: url("~@/assets/images/wapper.png") no-repeat;
  background-size: 100% auto;
}
</style>
